<template>
  <div class="tinymce-editor">
    <editor id="tinymce" v-model="content" :disabled="disabled" :init="init"></editor>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/icons/default/icons'
import 'tinymce/plugins/codesample'
import 'tinymce/plugins/print'
import 'tinymce/plugins/toc'
export default {
  name: 'DocEditor',
  props: {
    value: {
      type: String,
      default: ''
    },
    plugins: {
      type: [String, Array],
      default:
        'link lists code table codesample print toc'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    readOnly: {
      type: Boolean,
      default: false
    },
    toolbar: {
      type: [String, Array],
      default: 'bold italic underline strikethrough codesample print toc | fontsizeselect fontselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink code | removeformat'
    }
  },
  components: {
    Editor
  },
  data () {
    return {
      init: {
        language_url: './static/langs/zh_CN.js',
        language: 'zh_CN',
        skin_url: './static/skins/ui/oxide',
        content_css: './static/skins/content/document/content.css',
        height: '600px',
        branding: false,
        menubar: true,
        plugins: this.plugins,
        toolbar: this.toolbar,
        zIndex: 1101
      },
      content: this.value
    }
  },
  mounted () {
    tinymce.init({})
    // 初始化编辑器模式
    this.updateEditorMode(this.readOnly)
  },
  methods: {
    updateEditorMode (status) {
      tinymce.activeEditor.setMode(status ? 'readonly' : 'design')
    }
  },
  watch: {
    value (newVal) {
      this.content = newVal
    },
    content (newVal) {
      this.$emit('input', newVal)
    },
    readOnly (newVal) {
      this.updateEditorMode(newVal)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
